import React, {useEffect, useState} from "react";
import axios from "axios";
import {Button, Modal, message, Space, Table} from "antd";
import {EditOutlined, DeleteOutlined, AuditOutlined, ExclamationCircleOutlined} from "@ant-design/icons";
import {Link, useNavigate} from "react-router-dom";

const { confirm } = Modal;

export default function NewsDraft() {
    const [dataSource, setDataSource] = useState([]);
    const navigate= useNavigate();

    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            render: (id)=><b>{id}</b>
        },
        {
            title: '新闻标题',
            dataIndex: 'title',
            render: (title, record)=>{
                // return <a href={"#/news-manage/preview/" + record.id}>{title}</a>
                return <Link to={"/news-manage/preview/" + record.id}>{title}</Link>
            }
        },
        {
            title: '作者',
            dataIndex: 'author'
        },
        {
            title: '新闻分类',
            dataIndex: 'category',
            render: (category)=>category.title
        },
        {
            title: '操作',
            key: 'operation',
            render: (record) => {
                return (
                    <Space size="middle">
                        <Button danger shape="circle" icon={<DeleteOutlined />} onClick={()=>handleDelete(record)} />
                        <Button shape="circle" icon={<EditOutlined />} onClick={()=>navigate('/news-manage/update/'+record.id)}/>
                        <Button type="primary" shape="circle" icon={<AuditOutlined />} onClick={()=>handleCheck(record)} />
                    </Space>
                )
            },
        },
    ];

    const { username } = JSON.parse(localStorage.getItem('token'));
    useEffect(()=>{
        axios.get(`/api/news?author=${username}&auditState=0&_expand=category`).then(response=>{
            // console.log(response.data);
            const data= response.data;
            setDataSource(data);
        });
    }, [username]);

    // 删除
    const handleDelete= (record)=>{
        confirm({
            title: '是否想要删除此项?',
            icon: <ExclamationCircleOutlined />,
            content: '删除操作不可撤回，请谨慎操作!!!',
            onOk() {
                setDataSource(dataSource.filter(data=>{
                    return data.id !== record.id;
                }));
                axios.delete(`/api/news/${record.id}`);
            },
            onCancel() {
                // console.log('Cancel');
            },
        });
    }

    // 审核
    const handleCheck= (record)=>{
        axios.patch(`/api/news/${record.id}`, {
            auditState: 1  // 0草稿箱  1待审核  2审核通过  3审核不通过
        }).then(()=>{
            message.success(`${record.title}这篇新闻已提交到审核列表中`);
            navigate('/audit-manage/list');  // 审核列表
        });
    }

    return (
        <div>
            <Table dataSource={dataSource} columns={columns} pagination={{ pageSize: 5 }} rowKey={ item=>item.id }/>
        </div>
    );
}
